import PermissionBtn from "@/components/PermissionBtn";
import { Button, Modal, Space, Switch, Table, TableProps } from "antd";
import { type Menu } from "../../../types/system/menu";
import { ExclamationCircleFilled, PlusOutlined } from "@ant-design/icons";
import { useMenuTree } from "./hooks/useMenuTree";
import OptionForm from "./components/OptionForm";
import { useMenuOption } from "./hooks/useMenuOption";


export default function Menu() {
 const {loading,tableData,changeStatus,removeMenu,getMenuList}= useMenuTree()
 const {isModalOpen,openOptionDialog,close,optionType,oldInfo} = useMenuOption()
 const showConfirm = (row: Menu) => {
  Modal.confirm({
    title: "警告",
    icon: <ExclamationCircleFilled />,
    content: `确认删除${row.menuName}和其子菜单?`,
    okText: "确认",
    cancelText: "取消",
    okType: 'danger',
    onOk() {
      console.log("OK");
      removeMenu(row);
    },
  });
};
  const columns: TableProps<Menu>["columns"] = [
    {
      title: "菜单名称",
      key: "menuName",
      dataIndex: "menuName",
      ellipsis: true,
      width: 120,
      align: "left",
      fixed: "left",
      render: (_, { icon, menuName }) => (
        <Space size={2} wrap>
          {icon && (
            <span
              className={`iconfont ${icon}`}
              style={{ color: "rgb(22, 119, 255)" }}
            />
          )}
          <span>{menuName}</span>
        </Space>
      ),
    },
    {
      title: "类型",
      key: "menuType",
      dataIndex: "menuType",
      ellipsis: true,
      width: 60,
      align: "center",
      render: (_, { menuType }) => (
        <span>{{ M: "目录", C: "菜单", F: "按钮" }[String(menuType)]}</span>
      ),
    },
    {
      title: "路由",
      key: "path",
      dataIndex: "path",
      ellipsis: true,
      width: 130,
      align: "center",
      render: (_, { menuType, path }) => (
        <span>{menuType === "F" ? "——" : path}</span>
      ),
    },

    {
      title: "权限码",
      key: "perms",
      dataIndex: "perms",
      ellipsis: true,
      width: 100,
      align: "center",
    },
    {
      title: "页面",
      key: "component",
      dataIndex: "component",
      ellipsis: true,
      width: 130,
      align: "center",
      render: (_, { menuType, component }) => (
        <span>{menuType === "F" ? "——" : component}</span>
      ),
    },
    {
      title: "显隐",
      key: "component",
      dataIndex: "component",
      ellipsis: true,
      width: 50,
      align: "center",
      render: (_, { menuType, visible }) => (
        <span>
          {menuType == "F" ? "——" : visible === "0" ? "显示" : "隐藏"}
        </span>
      ),
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      ellipsis: true,
      width: 100,
      align: "center",
      render: (_, row) => (
        <>
          {row.menuType === "C" && (
            <Switch
              checkedChildren="正常"
              unCheckedChildren="禁用"
              checked={row.status === "0"}
              onChange={() => changeStatus(row)}
            />
          )}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 240,
      align: "center",
      render: (_, row) => (
        <Space size={2} wrap>
          <PermissionBtn code="menu.add">
            <Button
              type="link"
              onClick={() => {
                openOptionDialog('addSub',row);
              }}
            >
              添加下级菜单
            </Button>
          </PermissionBtn>
          <PermissionBtn code="menu.edit">
            <Button
              type="link"
              onClick={() => {
                openOptionDialog('edit',row)
              }}
            >
              编辑
            </Button>
          </PermissionBtn>
          <PermissionBtn code="menu.remove">
            <Button
              type="link"
              danger
              onClick={() => {
                showConfirm(row);
              }}
            >
              删除
            </Button>
          </PermissionBtn>
          <PermissionBtn code="menu.view">
            <Button
              type="link"
              onClick={() => {
                console.log(row);
              }}
            >
              查看
            </Button>
          </PermissionBtn>
        </Space>
      ),
    },
  ];
  return (
    <div className="page__wrap--g">
      <div className="form__wrap--g" style={{ justifyContent: "flex-end" }}>
        <PermissionBtn code="menu.add">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="middle"
            onClick={() => {
              openOptionDialog('add')
            }}
          >
            添加一级菜单
          </Button>
        </PermissionBtn>
      </div>
      <div className="table__wrap--g no-page">
        <Table
          loading={loading}
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          sticky
          bordered
          size="small"
          scroll={{ x: 1300 }}
          pagination={false}
        />
      </div>
      {isModalOpen && (
        <OptionForm
          isModalOpen={isModalOpen}
          optionType={optionType}
          oldInfo={oldInfo}
          close={close}
          change={() => {
            getMenuList();
          }}
        />
      )}
    </div>
  );
}
